<template>
  <div class="page-container person-container">
    <el-form
      ref="ruleFormRef"
      :model="personalData.form"
      label-width="100px"
      :rules="rules"
      class="demo-ruleForm"
    >
      <el-form-item label="用户名" prop="name">
        <el-input v-model="personalData.form.name" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="账号" prop="loginId">
        <el-input v-model="personalData.form.loginId" type="text" autocomplete="off" />
      </el-form-item>
      <el-form-item label="旧密码" prop="oldLoginPwd">
        <el-input
          v-model="personalData.form.oldLoginPwd"
          type="password"
          autocomplete="off"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码" prop="loginPwd">
        <el-input
          v-model="personalData.form.loginPwd"
          type="password"
          autocomplete="off"
          show-password
        />
      </el-form-item>
      <el-form-item label="新密码确认" prop="newLoginPwd">
        <el-input
          v-model="personalData.form.newLoginPwd"
          type="password"
          autocomplete="off"
          show-password
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleEditPersonal" size="large"
          >修改</el-button
        >
        <el-button type="danger" size="large" @click="handleBack">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { userLogin, updateUser } from "@/api/user";
import store from "@/store/index.js";
import { FormInstance } from "element-plus/lib/components/form/index.js";
import { ElMessage } from "element-plus";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
const { user } = store.state;
const personalData = reactive({
  data: {
    id: user.user.id,
    name: user.user.name,
    loginId: user.user.loginId,
  },
  form: {
    name: user.user.name,
    loginId: user.user.loginId,
    oldLoginPwd: "",
    loginPwd: "",
    newLoginPwd: "",
  },
});
const router = useRouter();
const ruleFormRef = ref<FormInstance>();

// 旧密码规则判定
async function validatePass(rule: any, value: string, callback: any) {
  if (value === "") {
    callback(new Error("密码不能为空请重新输入"));
  } else if (value.length < 3 && value.length > 20) {
    callback(new Error("旧密码长度不能小于6大于19"));
  } else {
    const res = await userLogin({
      isOldPassword: true,
      loginId: personalData.form.loginId,
      loginPwd: value,
    });
    if (res.code !== 0) {
      callback(new Error("旧密码不正确！"));
    }
  }
  callback();
}

//账号信息修改
async function handleEditPersonal() {
  await ruleFormRef.value?.validate();
  const updateObj = {
    name: personalData.form.name,
    loginId: personalData.form.loginId,
    loginPwd: personalData.form.loginPwd,
    oldLoginPwd: personalData.form.oldLoginPwd,
  };
  //   成功与否判断
  const res = await updateUser(updateObj);
  if (res.code === 0) {
    router.push({
      name: "login",
    });
    ElMessage({
      type: "success",
      message: "修改管理员信息成功！",
    });
  } else {
    ElMessage({
      type: "error",
      message: res.msg,
    });
  }
}
// 返回首页
function handleBack() {
  router.push({
    name: "dashboard",
  });
}

// 新密码自定义验证规则
function validateNewPass(rule: any, value: string, callback: any) {
  if (value !== personalData.form.loginPwd) {
    callback("两次输入密码不一致，请重新进行输入内容！");
  }
  callback();
}

// 验证规则
const rules = {
  name: [
    { required: true, message: "用户名不能为空", trigger: "blur" },
    { min: 2, max: 15, message: "用户名长度不能小于2大于15", trigger: "blur" },
  ],
  loginId: [
    { required: true, message: "用户账号不能为空", trigger: "blur" },
    { min: 6, max: 19, message: "用户账号长度不能小于6大于19", trigger: "blur" },
  ],
  oldLoginPwd: [
    { min: 6, max: 19, message: "旧密码长度不能小于6大于19", trigger: "blur" },
    { validator: validatePass, trigger: "blur" },
  ],
  loginPwd: [
    { min: 6, max: 19, message: "密码长度不能小于6大于19", trigger: "blur" },
    { required: true, message: "密码不能为空", trigger: "blur" },
  ],
  newLoginPwd: [
    { min: 6, max: 19, message: "密码长度不能小于6大于19", trigger: "blur" },
    { required: true, message: "密码不能为空", trigger: "blur" },
    { validator: validateNewPass, trigger: "blur" },
  ],
};
</script>

<style scoped lang="less">
.el-input {
  height: 40px;
}

.el-form-item {
  margin: 20px 0;
  .el-form-item__label {
    font-weight: bold !important;
  }
}
</style>
